<template>
  <el-config-provider :locale="zhCn">
    <RouterView :class="greyMode ? `grey-mode` : ''" />
  </el-config-provider>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores/modules/app'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

defineOptions({
  name: 'AppRoot'
})
const appStore = useAppStore()

const greyMode = computed(() => appStore.getGreyMode)

// pinia 状态管理 ===>
const globalStore = useGlobalStore()
// const tmpCount = computed(() => globalStore.counter)
// 监听状态变化
globalStore.$subscribe((mutation, state) => {
  if (mutation.events) {
    let _Array = mutation.events
    if (!Array.isArray(_Array)) {
      _Array = [_Array]
    }
    _Array.forEach((item) => {
      console.log(
        `%c[${mutation.storeId}.${item?.key}] <${mutation.type}> >>> ${item?.oldValue} => ${item?.newValue}`,
        'color: red'
      )
    })
  }
  console.log('%c[state] >> ', 'color: red')
  console.log(state)
  console.log('%c<< [state]', 'color: red')
})
// pinia 状态管理 <===
</script>
